<template>
	<div class="decorate-pdLiving"
    :style="tplItemData.modulePadding && tplItemData.levelPadding? 'padding:'+tplItemData.modulePadding+'px '+tplItemData.levelPadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <!-- TODO 微分销与小程序差别：小程序不展示拍对直播 -->
    <!-- 5.1.4 之后的版本 对拍对直播做了插件，通过 webview 的方式进行调整查看直播 -->
    <section class="pdLiving-box"> 
      <ul>
        <a v-for="(item,index) in tplItemData.dataset" :key="index" @click="showList" class="bdbox">
          <img :src="item.pic" alt="">
        </a>
      </ul>
    </section>
    <!-- 直播链接弹窗 -->
    <van-popup v-model="show" >
      <div class="live-container">
        <div class="live-content">
          <p class="title">主播喊你看直播啦！</p>
          <div class="scroll_box">
            <ul>
              <li v-for="(item,index) in zb_list" :key="index">
                <div class="lists" v-if="item.can_play==1">
                  <div class="fl icon">
                    <img :src="item.cover" alt="">
                    <p>{{item.user_nickname}}</p>
                  </div>
                  <div class="fr content">
                    <h4>{{item.title}}</h4>
                    <div class="type clearfix">
                      <!-- 直播状态灯 直播中类名 living  看回放类名end-->
                      <span :class="['fl', 'light', item.status == 1?'living':'end']"></span>
                      <!-- 直播状态  直播中或看回放           -->
                      <span class="fl status" v-if="item.status == 0">预约中</span>
                      <span class="fl status" v-if="item.status == 1">直播中</span>
                      <span class="fl status" v-if="item.status == 2">断线</span>  
                      <span class="fl status" v-if="item.status == 4">回放</span>
                      <!-- 直播跳转地址 -->
                      <!-- <a :href="'/live/index.html#/liveDetail?sid='+shop_id+'&pid='+user_id+'&liveId='+item.id" class="fl go">进入直播间</a> -->
                      <span @click="openLink(item.play_url, item.title)" class="fl go">进入直播间</span>

                      <span class="fl icon_num"></span>
                      <!-- 直播人数 -->
                      <span class="fl number">{{item.view_num}}</span>
                      </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>

import Vue from 'vue'
import { Popup } from 'vant'
import Store from '@/utils/store'
import small from '@/smallapp/small'
Vue.use(Popup)

export default Vue.extend({
  name: 'index',
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      show: false,
      zb_list: [],
      shop_id: '',
      user_id: ''
    }
  },
  created() {
    this.zb_list = this.tplItemData.zb_list ? this.tplItemData.zb_list.data.items : []
    this.shop_id = Store.fetchLocal('sid')
    this.user_id = Store.fetchLocal('pid')
  },
  methods: {
    openLink(link, title){
      // console.log(title)
      // const webLink = window.location.origin + link
      Store.saveLocal('webSrc', link)
      this.$JumpName(this, 'webView', {title: title})
    },
    showList() {
      // TODO 小程序对接拍对直播直接跳转
      if (small.globalData.isPdZb == 1) {
        this.show = true
      //   // wx.navigateTo({
      //   //   url: `plugin-private://wx5d130e4479328f39/pages/living-list/index`,
      //   // })
      //   // window.open('/pdzb')
      //   wx.redirectTo({
      //     url: `/activity/pages/pdzb/index?type=jump&targeturl=${encodeURIComponent('/pdzb')}`
      //     // url: `/goods/pages/pdzbShare/index?type=jump&targeturl=${encodeURIComponent('/pdzb-share')}`
      //   })
      } else {
        this.$Error('当前版本暂未对接拍对直播')
      }

    }
  }
})
</script>

<style lang="scss">
.decorate-pdLiving{
  .pdLiving-box{
    overflow: hidden;
    ul{
      a{
        display: block;
        float: left;
        width: 100%;
        margin-right: 20px;
        overflow-x: hidden;
        img {
          width: 100%;
          height: auto;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .van-popup{
    background: transparent;
    .van-popup__close-icon--top-right{
      bottom: 0;
    }
  }
  .live-container{
    width: 640px;
    height: 846px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    background: url(https://img.wifenxiao.com/h5-wfx/images/diy/live_bg.png) center/cover no-repeat;
    .live-content{
      border-radius: 24px;
      background: #fff;
      height: 100%;
      overflow: hidden;
      .title{
        overflow: hidden;
        width: 100%;
        line-height: 100px;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        color: #3d3d3d;
        background-color: #fbfbfb;
      }
      .scroll_box{
        overflow: scroll;
        height: calc(100% - 100px);
        ul {
          width: 100%;
          li {
            width: 100%;
            .lists{
              border-bottom: 1px solid #f0f0f0;
              overflow: hidden;
              padding: 10px;
              .icon {
                width: 140px;
                height: 140px;
                position: relative;
                border-radius: 8px;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
                p {
                  position: absolute;
                  width: 100px;
                  padding: 0 20px;
                  line-height: 36px;
                  text-align: center;
                  font-size: 18px;
                  color: #fff;
                  bottom: 0;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  background-color: rgba(0,0,0,.3);
                }
              }
              .content {
                width: calc(100% - 164px);
                height: 100%;
                h4 {
                  width: 100%;
                  line-height: 64px;
                  font-size: 26px;
                  color: #1e1e1e;
                  text-align: left;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .type {
                  margin-top: 12px;
                  span {
                    font-size: 24px;
                    display: inline-block;
                    color: #1e1e1e;
                  }
                  .light {
                    height: 14px;
                    width: 14px;
                    border-radius: 8px;
                    margin-top: 16px;
                    margin-right: 8px;
                    animation: anim .5s infinite alternate;
                    &.living {
                      background-color: #18c756;
                    }
                    &.end{
                      background-color: #ff4d4d;
                    }
                  }
                  .status{
                    line-height: 46px;
                    margin-right: 20px;
                  }
                  .go {
                    display: inline-block;
                    line-height: 46px;
                    padding: 0 20px;
                    background-color: #ffda44;
                    border-radius: 8px;
                    margin-right: 14px;
                  }
                  .icon_num {
                    width: 30px;
                    height: 30px;
                    background: url(/PublicMob/images/icon_num.png) 100%/100% no-repeat;
                    margin-top: 8px;
                    margin-right: 6px;
                  }
                  .number {
                    line-height: 46px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @keyframes  anim{
    0%{opacity: 1;}
    // 25%{opacity: .75;}
    50%{opacity: .5;}
    // 75%{opacity: .25;}
    100%{opacity: 0;}
  }
}


</style>